<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <%--引入element的js--%>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/js/axios.min.js"></script>
    <%--引入elementui的样式--%>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        .el-tag {
            background-color: transparent; /* 设置背景色为透明 */
            border: none; /* 可选，如果你不想要边框 */
        }
    </style>
</head>
<body>
<div  id="app">
    <el-form :inline="true" :model="bookVo" class="demo-form-inline">
        <el-form-item label="图书名称" >
            <el-input v-model="bookVo.bookName" placeholder="请输入图书名称"></el-input>
        </el-form-item>
        <el-form-item label="图书作者">
            <el-input v-model="bookVo.bookAuthor" placeholder="图书作者"></el-input>
        </el-form-item>
        <el-form-item label="选择类型" prop="booktypeId">
            <el-select v-model="bookVo.booktypeId" placeholder="选择类型">
                <el-option v-for="b in booktypes1" :label="b.booktypes"  :key="b.booktypeId" :value="b.booktypeId"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="search">搜索</el-button>
            <el-button type="success" icon="el-icon-refresh" @click="reset">重置</el-button>
        </el-form-item>
    </el-form>
    <el-table
            :data="books"
            border
            style="width: 100%" text-align="center">
        <el-table-column
                prop="borrowbook.id"
                label="借阅编号">
        </el-table-column>
        <el-table-column
                prop="user.userNick"
                label="借阅人">
        </el-table-column>
        <el-table-column
                prop="borrowbook.borrowDate"
                label="借阅时间"
        >
        </el-table-column>
        <el-table-column
                prop="borrowbook.examinestatus"
                label="审核状态">
            <template slot-scope="scope">
                <el-tag
                        type="info"
                        v-if="scope.row.borrowbook.examinestatus==0"
                        effect="dark">
                    审核未通过
                </el-tag>
                <el-tag
                        type="success"
                        v-else-if="scope.row.borrowbook.examinestatus==1"
                        effect="dark">
                    审核通过
                </el-tag>
                <el-tag
                        type="warning"
                        v-else-if="scope.row.borrowbook.examinestatus==2"
                        effect="dark">
                    待审核
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                label="借阅详情">
            <template slot-scope="scope">
                <el-button @click="borrowShow(scope.row)" type="primary" size="small">详细信息</el-button>
            </template>
        </el-table-column>
        <el-table-column
                type="Info"
                fixed="right"
                label="操作"
                width="180">
            <template slot-scope="scope">
            <el-tag
            v-if="scope.row.borrowbook.examinestatus==2"
            class="el-tag"
            >
                <el-button @click="access(scope.row)" type="primary" size="small">通过</el-button>
                <el-button @click="back(scope.row)" type="danger" size="small">驳回</el-button>
            </el-tag>
            </template>
        </el-table-column>
    </el-table>
    <el-dialog title="借阅详情" :visible.sync="dialogTableVisible">
        <el-table :data="details">
            <el-table-column
                    prop="book.bookId"
                    label="图书编号">
            </el-table-column>
            <el-table-column
                    prop="book.bookIco"
                    label="图书图片">
                <template slot-scope="scope">
                    <img style="width: 80px;height: 40px" :src="scope.row.book.bookIco">
                </template>
            </el-table-column>
            <el-table-column
                    prop="book.bookName"
                    label="图书名称">
            </el-table-column>
            <el-table-column
                    prop="booktype.booktypes"
                    label="图书类型">
            </el-table-column>
        </el-table>
    </el-dialog>
    <el-dialog title="驳回详情" :visible.sync="dialogBackFormVisible" width="250+‘ ’">
        <el-form :model="reasonform" ref="formRef">
            <el-form-item label="驳回原因" :label-width="250+' '" :label-heigh="50+' '">
                <el-input v-model="reasonform.reback" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogBackFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="backdetails">确 定</el-button>
        </div>
    </el-dialog>

    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="current"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
<script>
    let app=new Vue({
        el: "#app",
        data: {
            //搜索表单对象
            bookVo: {},
            //驳回原因表单
            reasonform: {},
            //图书表格的数据
            books: [],
            //当前的页码
            current: 1,
            //每页的条数
            pageSize: 5,
            //总条数
            total: 0,
            //所有图书类型的信息
            booktypes1: [],
            //详情图书表单对话框
            dialogTableVisible: false,
            //详情图书表格数据
            details: [],
            //驳回信息表单对话框
            dialogBackFormVisible: false,
            //驳回信息表单对象
            rebackrow: {},
        },
        created() {
            this.loadBook();
            this.loadBookType();
        },
        methods: {
            handleClick() {
                console.log("handleClick方法执行了")
                console.log(this)
                this.$refs.upload.$el.querySelector('input').click()
            },
            //页面显示数据条数改变重新渲染数据
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadBook();
            },
            //页码改变重新渲染数据
            handleCurrentChange(val) {
                this.current = val;
                this.loadBook();
            },
            //重置按钮
            reset() {
                this.bookVo.bookName = ""
                this.bookVo.bookAuthor = ""
                this.bookVo.booktypeId = ""
                this.loadBook()
            },
            //搜索事件
            search() {
                this.current = 1;
                this.loadBook();
                this.loadBookType()
            },
            //初始化图书类型表格数据
            loadBookType() {
                axios.get("/book/booktype").then(result => {
                    this.booktypes1 = result.data.data;
                })
            },
            //初始化审核图书表格数据
            loadBook() {
                axios.post("/book/borrow/" + this.current + "/" + this.pageSize, this.bookVo).then(result => {
                    console.log("222")
                    console.log(result)
                    this.books = result.data.data.list;
                    this.total = result.data.data.total;
                })
            },
            //详情书单
            borrowShow(row) {
                this.dialogTableVisible = true;
                axios.post("/borrow/details/" + row.borrowbook.id + "/" + row.user.userId).then(result => {
                    console.log(result)
                    this.details = result.data.data;

                })
            },
            //审核通过
            access(row) {
                axios.post("/borrow/access/" + row.borrowbook.id).then(result => {
                    if (result.data.data == 1) {
                        this.loadBook();
                    }
                })
            },
            //驳回按钮
            back(row) {
                this.dialogBackFormVisible = true;
                this.rebackrow = row;
                this.reasonform = row.borrowbook;
            },
            //审核失败
            backdetails(row){
                    this.$refs.formRef.validate((valid) => {
                        if (valid) {
                            //调用后端接口
                            axios.post("/borrow/reback",this.reasonform).then(result=> {
                                if (result.data.data === 1) {
                                    //重置表单
                                    this.$refs.formRef.resetFields();
                                    //关闭对话框
                                    this.dialogBackFormVisible = false;
                                    //响应消息
                                    this.$message.success(result.data.msg);
                                    //重新加载表格
                                    this.loadBook();
                                }
                            })
                        }
                    })
            }
        }
    })
</script>
</body>
</html>
